<!doctype html>
<html lang="en">
  <head>
    <script src="index.js" type="module"></script>
    <script src="../../helpers/header.js" type="module"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container text-center">
      <div>
        <input
          type="text"
          id="password"
          min="8"
          max="32"
          autofocus
          autocomplete="off"
          placeholder="Enter the password"
        />
      </div>

      <div class="flex indicators">
        <span id="lc">Lowercase</span>
        <span id="uc">Uppercase</span>
        <span id="num">Number</span>
        <span id="sym">Symbols</span>
      </div>

      <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
      </div>

      <p>Password has <strong id="chars">0</strong> chars</p>
      <p>Your password is <strong id="strength">Weak</strong></p>
    </div>
  </body>
</html>
